<template>
  <div>
    <h1>Sub App 2 - Home Page</h1>
    <img src="@/assets/big.png" alt="" />
    <div>
      <button @click="handleClick">跳转到about</button>
      <button @click="handleGoMain('/about')">跳转到主应用 about 页</button>
      <button @click="handleGoMain('/sub-app-1')">跳转到sub-app-1</button>
      <button @click="handleGoSubApp1About">跳转到sub-app-1的about页面</button>
      <button @click="handleSendData">向主应用发送数据</button>
    </div>
    <h1>
      {{ route.path }}
    </h1>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { customLog } from "@/utils/log";
const route = useRoute();
const router = useRouter();

const props = window.$wujie?.props;
customLog("接收到主应用初始传递的数据：", props);

window.$wujie?.bus.$on("main-data-change", (data) => {
  customLog("接收到主应用传递的数据：", data);
});

const handleClick = () => {
  router.push("/about");
};
const handleSendData = () => {
  window.$wujie?.bus.$emit("sub-data-change", {
    sub: "sub-app-2",
    name: "lily",
  });
};
const handleGoMain = (path) => {
  window.$wujie?.props.jump(path);
};

const handleGoSubApp1About = () => {
  window.$wujie?.props.jump({
    path: "/sub-app-1",
    query: { "sub-app-1": "about" },
  });
};
</script>

<style scoped>
img {
  width: 500px;
  height: 350px;
}
</style>
